import React, { Component } from 'react';
import {
    Card,
    Button,
    Form,
    DatePicker,
    Input,
    Spin,
    Checkbox
  } from 'antd'
  import {withRouter}  from 'react-router-dom'
  import  {formItemLayout} from './../../style'
 
@Form.create()
class violationTicket extends Component {
    constructor() {
        super();
        this.state = {
           formData: {
            name: '',
            rule: '',
            ViolationName: '',
            age:'',
            sex: '',
            job: '',
            content: ''
           },
           title: '新建'
        }
    }
    componentDidMount() {
        const {state} = this.props.location;
        // 根据传的值将值放到表单里面
        if (state) {
            this.setFormValue(state);
        }
    }

    // 表单赋值
    setFormValue(state) {
        this.props.form.setFieldsValue({
            name: state.name,
            rule: state.rule,
            ViolationName: state.ViolationName,
            age: state.age,
            sex: state.sex,
            job: state.job,
            content: state.content
        })
        this.setState({
            formData: this.props.location.state,
            title: '编辑'
        })
    }
    // 保存
    save =() => {
        console.log( this.props.form.validateFields((err, value)=> {
            this.props.history.push('/admin/violation');
        }))
    }

    // 返回
    goBanck = ()=> {
        this.props.history.push('/admin/violation');
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                 <Card title={this.state.title} bordered={false}>
                        <Form
                        {...formItemLayout}
                        >
                            <Form.Item
                            label='姓名'
                            name='name'
                                >
                                   {getFieldDecorator('name', {
                                        rules: [{ required: true, message: '请输入您的姓名!' }],
                                   })
                                   (<Input placeholder="请输入姓名" />)
                                   } 
                            </Form.Item>
                            <Form.Item
                                name="rule"
                                label="规则"
                            >
                                  {getFieldDecorator('rule', {
                                        rules: [{ required: true, message: '请输入规则!' }],
                                   })
                                   (<Input placeholder="请输入规则" />)
                                   } 
                                
                            </Form.Item>
                            <Form.Item
                                name="ViolationName"
                                label="条款"
                            >
                                {getFieldDecorator('ViolationName', {
                                        rules: [{ required: true, message: '请输入条款!' }],
                                   })
                                   (<Input placeholder="请输入条款" />)
                                   }
                               
                            </Form.Item>
                            <Form.Item
                                name="age"
                                label="年龄"
                            >
                                {
                                    getFieldDecorator('age', {
                                        rules: [{required: true, message: '请输入年龄'}]
                                    })
                                    (<Input placeholder="请输入年龄" />)
                                }
                               
                            </Form.Item>
                            <Form.Item
                                name="sex"
                                label="性别"
                            >
                                {
                                    getFieldDecorator('sex', {
                                        rules: [{required: true, message: '请输入性别'}]
                                    })
                                    (<Input placeholder="请输入性别" />)
                                }
                            </Form.Item>

                            <Form.Item
                                name="job"
                                label="职位"
                            >
                                {
                                    getFieldDecorator('job', {
                                        rules: [{required: true, message: '请输入职位'}]
                                    })
                                    (<Input placeholder="请输入职位" />)
                                }
                                
                            </Form.Item>

                            <Form.Item
                                name="content"
                                label="备注"
                            >
                                {getFieldDecorator('content', {
                                    rules: [{required: true, message: '请填写备注信息'}]
                                })
                                ( <Input placeholder="请填写备注信息" />)
                                }
                               
                            </Form.Item>

                            <Form.Item
                            wrapperCol={{ offset: 4 }}
                            >
                        <div className="btn-group">
                                <Button type="primary" onClick={this.save}>
                                保存
                                </Button>
                                <Button type="primary" onClick={this.goBanck}>
                                返回
                                </Button>
                        </div>
                            </Form.Item>
                    </Form> 
                </Card>
            </div>
        )
    }
}
export default withRouter(violationTicket)